<template>
  <div class="container-item-slot-card" :style="`min-height:${minHeight}px`">
    <!-- 上方容器 -->
    <div v-if="showTitle" class="group-top">
      <!-- 图标 -->
      <img class="item-icon" :src="comIcon">
      <!-- 标题文字 -->
      <span class="item-title">{{ title }}</span>
      <span class="item-text">{{ text }}</span>
    </div>
    <!-- 下方容器 -->
    <div class="group-btm">
      <slot />
    </div>
  </div>
</template>

<script>
// icon
import iconPath from '@/assets/address-icon.png'
import iconOrder from '@/assets/order-icon.png'
import iconService from '@/assets/serve-icon.png'
export default {
  props: {
    icon: {
      type: String,
      default: ''
    },
    minHeight: {
      type: [Number, String],
      default: 0
    },
    showTitle: {
      type: [Boolean, String],
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      item_icon: {
        '地址': iconPath,
        '订单': iconOrder,
        '客服': iconService
      }
    }
  },
  computed: {
    comIcon() {
      return this.item_icon[this.icon]
    }
  }
}
</script>

<style lang="less" scoped>
.container-item-slot-card {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 3px #ddd;
  .group {
    &-top {
      padding: 10px;
      border-bottom: 1px solid #ddd;
    }
    &-btm {
      padding: 10px;
      position: relative;
    }
  }
  .item {
    &-icon {
      width: 10px;
      margin-right: 10px;
    }
    &-text {
      float: right;
      font-size: 14px;
      color: #d63a54;
    }
  }
}
</style>
